<template>
  <div class="page-container">
    <div class="in-container">
      <AppSearchForm @submit="search()" @reset="reset()">
        <el-form-item>
          <el-input
            v-model="state.query.KeyWords"
            clearable
            placeholder="输入集装箱箱型"
            style="width: 200px"
          />
        </el-form-item>
      </AppSearchForm>
      <div class="btn-area">
        <el-button @click="openDialog" type="primary"> 新增 </el-button>
        <el-button @click="exportFile" type="primary"> EXCEL导出 </el-button>
        <el-button @click="deleteSelectData" type="danger"> 删除 </el-button>
      </div>
      <AppPageTable
        stripe
        :data="state.tableData.data"
        @change="getList()"
        :autostyle="'height: calc(100% - 81px);'"
        :option="state.tableData.option"
      >
        <el-table-column
          show-overflow-tooltip
          type="selection"
          width="40"
          fixed="left"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="containerSize"
          width="100"
          label="集装箱尺寸"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="containerNamEn"
          width="140"
          label="集装箱英文描述"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="containerName"
          width="140"
          label="集装箱中文描述"
        />

        <el-table-column
          :show-overflow-tooltip="true"
          prop="containerType"
          width="100"
          label="集装箱箱型"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="containerCode"
          width="100"
          label="显示代码"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="tare"
          width="100"
          label="箱皮重"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="maxGrossWeight"
          width="100"
          label="最大重量"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="maxVolume"
          width="100"
          label="最大体积"
        />
        <el-table-column
          :show-overflow-tooltip="true"
          prop="teu"
          width="100"
          label="TEU"
        />
        <el-table-column label="操作" width="150" fixed="right">
          <template #default="scope">
            <el-button @click.stop="update(scope.row)" type="primary"
              >编辑</el-button
            >
            <el-popconfirm
              title="确定删除本条数据吗？"
              @confirm="deleteData(scope.row)"
            >
              <template #reference>
                <el-button type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </AppPageTable>

      <el-dialog
        :title="state.dialogData.title"
        v-model="state.dialogData.show"
        width="500px"
      >
        <el-form
          :model="state.formData"
          :rules="state.formRules"
          label-width="100px"
          ref="form"
        >
          <el-form-item prop="containerSize" label="集装箱尺寸">
            <el-input v-model="state.formData.containerSize"></el-input>
          </el-form-item>
          <el-form-item prop="containerNamEn" label="集装箱英文描述">
            <el-input v-model="state.formData.containerNamEn"></el-input>
          </el-form-item>
          <el-form-item prop="containerName" label="集装箱中文描述">
            <el-input v-model="state.formData.containerName"></el-input>
          </el-form-item>
          
          <el-form-item prop="containerType" label="集装箱箱型">
            <el-input v-model="state.formData.containerType"></el-input>
          </el-form-item>
          <el-form-item prop="containerCode" label="显示代码">
            <el-input v-model="state.formData.containerCode" disabled></el-input>
          </el-form-item>
          <el-form-item label="箱皮重">
            <el-input
              v-model="state.formData.tare"
              @input="state.formData.tare = checkIsNumber(state.formData.tare)"
            ></el-input>
          </el-form-item>
          <el-form-item label="最大重量">
            <el-input
              v-model="state.formData.maxGrossWeight"
              @input="
                state.formData.maxGrossWeight = checkIsNumber(
                  state.formData.maxGrossWeight
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item label="最大体积">
            <el-input
              v-model="state.formData.maxVolume"
              @input="
                state.formData.maxVolume = checkIsNumber(
                  state.formData.maxVolume
                )
              "
            ></el-input>
          </el-form-item>
          <el-form-item prop="teu" label="TEU">
            <el-input v-model="state.formData.teu"></el-input>
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="cancel" link>取消</el-button>
            <el-button type="primary" @click="submit"> 确认 </el-button>
          </span>
        </template>
      </el-dialog>
    </div>
  </div>
</template>

<script setup>
import {
  ref,
  onMounted,
  watch,
  computed,
  reactive,
  nextTick,
  defineEmits,
} from "vue";
import { ElMessage, ElMessageBox } from "element-plus";
import request from "@/public/request";

import AppSearchForm from "@/components/AppSearchForm.vue";
import AppPageTable, { useTableOption } from "@/components/AppPageTable2";
import AppTitleBox from "@/components/AppTitleBox.vue";
import { fileDownload } from "@/public/publicUtils";

const state = reactive({
  query: {
    KeyWords: "",
  },
  tableData: {
    data: [],
    option: useTableOption(),
  },
  dialogData: {
    show: false,
    title: "",
    btnLoading: false,
  },
  formData: {
    containerSize: "",
    containerName: "",
    containerNameEn: "",
    containerType: "",
    containerCode: "",
    tare: "",
    maxGrossWeight: "",
    maxVolume: "",
    teu: "",
  },
  formRules: {
    containerSize: [
      { required: true, message: "请输入集装箱尺寸", trigger: "blur" },
    ],
    containerType: [
      { required: true, message: "请输入集装箱箱型", trigger: "blur" },
    ],
  },
});

const computedCtnName = computed(() => {
  return state.formData.containerSize + state.formData.containerType;
});

const checkIsNumber = (e) => {
  if (e == "00") {
    return "0";
  }
  let c = e.replace(/^\.+|[^\d.]/g, "");
  return c;
};
const exportFile = () => {
  fileDownload("/api/cscontainer/download", state.query, "箱型箱尺")
    .then(() => {})
    .catch((err) => {
      ElMessage.warning("文件导出失败");
    });
};
const getList = () => {
  state.tableData.option.loading = true;
  request
    .get("/api/cscontainer/querypage", {
      KeyWords: state.query.KeyWords,
      PageIndex: state.tableData.option.page,
      PageSize: state.tableData.option.pageSize,
    })
    .then((res) => {
      state.tableData.data = res.content;
      state.tableData.option.total = res.totalElements;
    })
    .finally(() => {
      state.tableData.option.loading = false;
    });
};
const search = () => {
  state.tableData.option.page = 1;
  state.tableData.pageSize = 10;
  getList();
};
const reset = () => {
  state.query.KeyWords = "";
  state.tableData.option.page = 1;
  state.tableData.pageSize = 10;
  getList();
};
const update = (data) => {
  state.formData = JSON.parse(JSON.stringify(data));
  state.dialogData.title = "编辑箱型";
  state.dialogData.show = true;
};
const deleteData = (data) => {
  request
    .post("/api/cscontainer/delete", {
      idArray: [data.id],
    })
    .then((res) => {
      if (res.status) {
        ElMessage.success(res.message);
        getList();
      } else {
        ElMessage.error(res.message);
      }
    });
};
const openDialog = () => {
  state.dialogData.title = "新增箱型";
  state.dialogData.show = true;
};
const form = ref();
const submit = async () => {
  state.dialogData.btnLoading = true;
  let url = "";
  if (state.formData.id) {
    url = "/api/cscontainer/update";
  } else {
    url = "/api/cscontainer/create";
  }
  await form.value.validate();
  request.post(url, state.formData).then((res) => {
    if (res.status) {
      ElMessage.success(res.message);
      getList();
      state.dialogData.show = false;
    } else {
      ElMessage.error(res.message);
    }
    state.dialogData.btnLoading = false;
  });
};
const cancel = () => {
  state.dialogData.show = false;
};
const updateCtnName = () => {
  state.formData.containerCode = computedCtnName;
};
/**
 * 多项删除业务
 */
const deleteSelectData = () => {
  let deleteSelectArray = [];
  state.tableData.option.selected.forEach((t) => deleteSelectArray.push(t.id));
  ElMessageBox.confirm("确定删除所选信息", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  })
    .then(async () => {
      request
        .post("/api/cscontainer/delete", {
          idArray: deleteSelectArray,
        })
        .then((res) => {
          if (res.status) {
            ElMessage.success(res.message);
            getList();
          } else {
            ElMessage.error(res.message);
          }
        });
    })
    .catch(() => {
      ElMessage.info("取消删除");
    });
};

watch(() => state.formData.containerSize, updateCtnName);

watch(() => state.formData.containerType, updateCtnName);

watch(
  () => state.dialogData.show,
  (newVal) => {
    if (!newVal) {
      state.formData = {
        containerSize: "",
        containerName: "",
        containerNameEn: "",
        containerType: "",
        containerCode: "",
        tare: "",
        maxGrossWeight: "",
        maxVolume: "",
        teu: "",
      };
      nextTick(() => {
        form.value.clearValidate();
      });
    }
  }
);

onMounted(() => {
  getList();
});
</script>

<style lang="scss" scoped>
.btn-area {
  margin-bottom: 8px;
}
</style>
